import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:sleep/help_style.dart';
import 'package:sleep/provider/turn_over_provider.dart';
import 'package:sleep/provider/wave_deatil_provider/sleep_detail_provider.dart';

class DetailSleep extends StatelessWidget {
  const DetailSleep({super.key});

  Widget eyesItem(
      {required String title, required String content, required String unit}) {
    return Container(
      padding: const EdgeInsets.all(8),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          border: Border.all(color: HelpStyle.primarycolor, width: 0.2)),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(title, style: HelpStyle.contextStyle),
              const SizedBox(width: 2),
              Text(unit,
                  style: HelpStyle.contextStyle
                      .copyWith(color: HelpStyle.grayTitleColor)),
            ],
          ),
          Text(content,
              style: HelpStyle.smallStyle
                  .copyWith(color: HelpStyle.grayTitleColor, fontSize: 10)),
        ],
      ),
    );
  }

  Widget eyes() {
    return Consumer(
      builder: (context, ref, child) {
        final sleep = ref.watch(sleepDetailProvider);
        final turnover = ref.watch(turnOverProvider);
        return Row(
          children: [
            Expanded(child: eyesItem(title: sleep.rr, content: "RR", unit: "")),
            const SizedBox(width: 10),
            Expanded(child: eyesItem(title: sleep.at, content: "AT", unit: "")),
            const SizedBox(width: 10),
            Expanded(child: eyesItem(title: sleep.ht, content: "HT", unit: "")),
            const SizedBox(width: 10),
            Expanded(
                child: eyesItem(
                    title: turnover.turnOver.toString(),
                    content: "Turn Over",
                    unit: "")),
          ],
        );
      },
    );
  }

  Widget titles() {
    return Consumer(builder: (context, ref, child) {
      return Row(
        children: [
          Icon(
            Icons.remove_red_eye,
            color: HelpStyle.primarycolor,
            size: 16,
          ),
          SizedBox(width: HelpStyle.cellMargin),
          Text(
            "Breathe Message",
            style: HelpStyle.contextStyle,
          ),
        ],
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
      decoration: HelpStyle.decoration,
      child: Column(
        children: [
          titles(),
          SizedBox(height: HelpStyle.cellMargin),
          eyes(),
        ],
      ),
    );
  }
}
